import React from 'react';
import { Link, useLocation } from 'react-router-dom';

const Navigation: React.FC = () => {
  const location = useLocation();
  
  const navStyle = {
    padding: '20px',
    borderBottom: '1px solid #ccc',
    backgroundColor: '#f5f5f5'
  };
  
  const linkStyle = (path: string) => ({
    marginRight: '20px',
    textDecoration: 'none',
    padding: '8px 16px',
    borderRadius: '4px',
    backgroundColor: location.pathname === path ? '#007bff' : 'transparent',
    color: location.pathname === path ? 'white' : '#007bff',
    border: '1px solid #007bff'
  });
  
  return (
    <nav style={navStyle}>
      <Link to="/page1" style={linkStyle('/page1')}>Page 1</Link>
      <Link to="/page2" style={linkStyle('/page2')}>Page 2</Link>
    </nav>
  );
};

export default Navigation;